<template>
  <div class="module-header">
    {{ isEdit ? `修改客户` : '新增客户' }}
    <div class="module-header-search">
      <el-button size="default" type="primary" @click="onRouterBack">返回</el-button>
      <el-button size="default" type="primary" @click="onSaveCustomer">保存客户</el-button>
    </div>
  </div>
  <div class="input-order-view">
    <el-row>
      <el-col :span="8">
        <el-form :model="customer" label-width="100px" size="default">
          <el-form-item label="客户名称：">
            <el-input v-model="customer.name" placeholder="输入客户名"/>
          </el-form-item>
          <el-form-item label="客户代号：">
            <el-input v-model="customer.code" placeholder="输入客户4位字母编码"/>
          </el-form-item>
          <el-form-item label="客户类型：">
            <el-select v-model="customer.category" clearable filterable placeholder="选择客户类型" style="width: 100%">
              <el-option v-for="item in customerCategory" :key="item.code" :label="item.label"
                         :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="客户地址：">
            <el-input v-model="customer.address" placeholder="输入客户地址，可空"/>
          </el-form-item>
          <el-form-item label="客户联系人：">
            <el-input v-model="customer.contact" placeholder="输入客户联系人，可空"/>
          </el-form-item>
          <el-form-item label="客户电话：">
            <el-input v-model="customer.mobile" placeholder="输入联系人电话，可空"/>
          </el-form-item>
          <el-form-item label="结算方式：">
            <el-select v-model="customer.cashType" clearable filterable placeholder="选择客户结算类型" style="width: 100%">
              <el-option v-for="item in customerCashType" :key="item.code" :label="item.label"
                         :value="item.code"/>
            </el-select>
          </el-form-item>
          <el-form-item label="客户状态：">
            <el-switch v-model="customer.status"
                       style="--el-switch-on-color: #c8c7e2; --el-switch-off-color: #13ce66"
                       active-text="停用"
                       inactive-text="启用"
                       :active-value="false"
                       :inactive-value="true"/>
          </el-form-item>
          <el-form-item label="客户描述：">
            <el-input type="textarea" :rows="5" v-model="customer.description" placeholder="客户详细描述"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {mixins, Options} from 'vue-class-component';
import {getCustomerById, insertCustomer} from "@/apis/customer.api";
import CustomerModel from "@/models/CustomerModel";
import {ElMessageBox} from "element-plus";
import DictMixin from "@/mixins/dict.mixin";
import DictionaryModel from "@/models/DictionaryModel";

@Options({})
export default class CustomerCreateView extends mixins(DictMixin) {
  customer: CustomerModel = new CustomerModel();
  customerId = '';
  isEdit = false;
  customerCategory: DictionaryModel [] = [];
  customerCashType: DictionaryModel [] = [];

  created() {
    this.customerCategory = Object.values(this.getSystemDict('CUSTOMER_TYPE')).sort((dict1: DictionaryModel, dict2: DictionaryModel) => dict1.sorted > dict2.sorted ? 1 : (dict1.sorted === dict2.sorted ? 0 : -1));
    console.log(this.customerCategory)
    this.customerCashType = Object.values(this.getSystemDict('CASH_TYPE'));
    console.log(this.customerCashType)

    this.customerId = Array.isArray(this.$route.params['id']) ? this.$route.params['id'][0] : this.$route.params['id'];
    if (this.customerId) {
      this.isEdit = true;
      getCustomerById(this.customerId).then((customer: CustomerModel) => {
        this.customer = customer;
      });
    }
  }

  onRouterBack() {
    this.$router.push('/customer')
  }

  onSaveCustomer() {
    insertCustomer(this.customer).then((value: CustomerModel) => {
      ElMessageBox.confirm('客户信息创建成功，点击确定继续创建新客户信息，点击取消返回客户列表', '提示信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        this.customer = new CustomerModel();
      }).catch(() => {
        this.onRouterBack();
      })
    })
  }
}
</script>

<style scoped>
.input-order-view {
  padding: 40px;
}
</style>